import Head from '../../components/header/header';
import Header from '../../components/header'
import '../../components/header/header.css'
// import { Link, Route, Switch } from 'react-router-dom'
import {
    BrowserRouter as Router,
    Link,
    Switch,
    HashRouter,
    Route,
    Redirect
  } 
  from "react-router-dom";
import { useContext } from 'react';
  import { Observer } from 'mobx-react';
  import { ContextAPI } from '../..';

import AssessManege from '../assessManege';
import BillManege from '../billManege/index';
import CarefulManManege from '../carefulManManege/';
import DeviceManege from '../deviceManege/';
import HeathManege from '../heathManege/';
import OldManManege from '../oldManManege/';
import OrderManege from '../orderManege/';
import RefundManege from '../refundManege/';
import ServiceClass from '../serviceClass/';
import SystemManege from '../systemManege/';

import ditu from '../../assets/images/home/ditu.png'
import dingdan from '../../assets/images/home/dingdan.png'
import shebei from '../../assets/images/home/shebei.png'
import laoren from '../../assets/images/home/laoren.png'
import jiankang from '../../assets/images/home/jiankang.png'
import guanggao from '../../assets/images/home/guanggao.png'
import xitong from '../../assets/images/home/xitong.png'
import fuwu from '../../assets/images/home/fuwu.png'
import guanli from '../../assets/images/home/guanli.png'
import wenzhang from '../../assets/images/home/wenzhang.png'
import peihuyuan from '../../assets/images/home/peihuyuan.png'
import yijian from '../../assets/images/home/yijian.png'
import gaojing from '../../assets/images/home/gaojing.png'
import duizhuang from '../../assets/images/home/duizhuang.png'
import pingjia from '../../assets/images/home/pingjia.png'
import tuikuan from '../../assets/images/home/tuikuan.png'
import yuan from '../../assets/images/home/yuan.png'
import kakou from '../../assets/images/home/kakou.png'
import xitongguanli from '../../assets/images/home/xitongguanli.png'

import './index.less'

import { useHistory } from "react-router-dom";


function Home(){
    // 引入 山下文
    const context = useContext(ContextAPI);
    const listData=[
        // {
        //     // url: () => import('../../assets/images/home/ditu.png'),
        //     url:ditu,
        //     name:'一张图',
        //     path:'',
        //     color:'#2D57AB'
        // },
        {
            url:dingdan,
            name:'订单管理',
            path: '/home/orderManege',
            color:'#AD8A3E'
        },{
            // url:'../../assets/images/home/laoren.png',
            url:laoren,
            name:'老人管理',
            path: '/home/oldManManege',
            color:'#8C3D3D'
        },{
            // url:'../../assets/images/home/shebei.png',
            url:shebei,
            name:'设备管理',
            path: '/home/deviceManege',
            color:'#308D60'
        },{
            // url:'../../assets/images/home/jiankang.png',
            url:jiankang,
            name:'健康管理',
            path: '/home/heathManege/healthData',
            color:'#A85131'
        },
        // {
        //     // url:'../../assets/images/home/guanggao.png',
        //     url:guanggao,
        //     name:'广告管理',
        //     path:'',
        //     color:'#28827F'
        // },
        // {
        //     // url:'../../assets/images/home/xitong.png',
        //     url:xitong,
        //     name:'系统消息',
        //     path:'',
        //     color:'#5F518F'
        // },
        // {
        //     // url:'../../assets/images/home/fuwu.png',
        //     url:fuwu,
        //     name:'服务回访',
        //     path:'',
        //     color:'#A73C50'
        // },
        {
            // url:'../../assets/images/home/ditu.png',
            url:guanli,
            name:'服务应用管理',
            path: '/home/serviceClass',
            color:'#824F55'
        },
        // {
        //     // url:'../../assets/images/home/wenzhang.png',
        //     url:wenzhang,
        //     name:'文章管理',
        //     path:'',
        //     color:'#157AA4'
        // },
        {
            // url:'../../assets/images/home/peihuyuan.png',
            url:peihuyuan,
            name:'陪护员管理',
            path:'/home/carefulManManege',
            color:'#444691'
        },
        // {
        //     // url:'../../assets/images/home/yijian.png',
        //     url:yijian,
        //     name:'意见投诉',
        //     path:'',
        //     color:'#338999'
        // },
        // {
        //     // url:'../../assets/images/home/gaojing.png',
        //     url:gaojing,
        //     name:'告警历史',
        //     path:'',
        //     color:'#A73C50'
        // },
        {
            // url:'../../assets/images/home/duizhuang.png',
            url:duizhuang,
            name:'对账管理',
            path:'/home/billManege',
            color:'#A0A0A1'
        },{
            // url:'../../assets/images/home/pingjia.png',
            url:pingjia,
            name:'评价管理',
            path:'/home/assessManege/evaluationList',
            color:'#147747'
        },{
            // url:'../../assets/images/home/tuikuan.png',
            url:tuikuan,
            name:'退款管理',
            path: '/home/refundManege',
            color:'#2D57AB'
        },
        // {
        //     // url:'../../assets/images/home/yuan.png',
        //     url:yuan,
        //     name:'预案管理',
        //     path:'',
        //     color:'#1D5066'
        // },
        // {
        //     // url:'../../assets/images/home/kakou.png',
        //     url:kakou,
        //     name:'卡口闸机',
        //     path:'',
        //     color:'#72A5BB'
        // },
        {
            // url:'../../assets/images/home/ditu.png',
            url:xitongguanli,
            name:'系统管理',
            path: '/home/systemManege',
            color: '#339999'
        }
    ]
    let history = useHistory();
    console.log(history)
    const toPath =(path)=>{
        console.log(history)
        history.push(path);
        context.setPath(path);
        console.log(context.path);
        
    }
    const location=()=>{
        context.setPath(history.location.pathname);
        console.log( context.path)
        if(context.path == '/home'){
            return  <Head></Head>
        }else{
            return  
        }

    }
    return (
        <Observer>
            {()=>(
                 <Router>
                 <div className='body'>
                 {location()}
                <div>
                    <ul className='list'>
                         {listData.map((v,i)=>(
                             <li 
                                 key={i} 
                                 style={{background:v.color}}
                                 onClick={()=>{
                                     toPath(v.path)
                                 }}
                             >
                                 <p id='mar'><img src={v.url}></img></p>
                                 <p id='mar'>{v.name}</p>
                             </li>
                             

                         ))}
                         <i></i><i></i><i></i><i></i><i></i>
                       
                    </ul>
                </div>
             </div>
             </Router>
             
            )}
        </Observer>
       
    )
}
export default Home;